<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1+p{
				display: none;
			}
			.btn{
				height: 60px;
				text-align: center;
				line-height: 60px;
				border-radius: 50%;
				border: 4px outset blue;
				outline: none;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
		
		<script>
			$(function(){
			 	$("h1").bind({
			 		click:function(){
			 			$(this).next().slideDown(500);
			 		},
			 		dblclick:function(){
			 			$(this).next().slideUp(100);
			 		},
			 		mouseover:function(){
			 			this.style.color="red";
			 			this.style.cursor="pointer";
			 		},
			 		mouseout:function(){
			 			$(this).css({"color":"black"});
			 		}
			 	});
			 	$("#remove").click(function(){
			 		$("h1").unbind();
			 		//$("h1").removeAttr("onclick");
			 		$(this).toggleClass("btn");//!!
			 	});
			});
		 
		</script>
	</head>
	<body>
		 
		<h1>什么是javascript</h1>
		<p>
			js是。。。。。。
		</p>
		<h1>什么是jquery</h1>
		<p>
			jquery是。。。。。
		</p>
		<h1>什么是继承人</h1>
		<p>
			什么是继承人是。。。。。。
		</p>
		
		<input type="button" value="去掉事件" id="remove" />
	</body>
</html>
